<template>
    <div class="wy_body">
        <ul class="wy_ul">
            <li v-for=" (item,index) in list" :key="item.id" v-show="index<2*page&&index>2*(page-1)-1"> 
                <img :src="item.item_pic_url" alt="">
                <div class="wy_li_div">{{item.title}}</div>
                <div class="wy_li_div">{{item.subtitle}}</div>
                <div class="wy_li_div">￥ {{item.price_info}}元起</div>
            </li> 
        </ul>
        <ul class="wy_ul_buttom">
            <li :class="{li_show:page==1}" @click="mypage(1)">上一页</li> 
            <li :class="{li_show:page==2}" @click="mypage(2)">下一页</li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios'
import {Toast} from 'vant'
    export default {
        name:'topic',
        data() {
            return {
                list:[],
                page:1,

            }
        },
        methods:{
            mypage(value){
                Toast.loading({
                message: '加载中...',
                forbidClick: true,
                });
                this.page=value;
            }
        },
        mounted(){ 
            axios.get(`http://localhost:8080/wy/getDB`).then(
                res=>{  
                    console.log("接受成功鸟~");   
                    this.list=res.data.topicList 
                    console.log(this.list);
                },
                er=>{
                    console.log("不准看",er.message);  
                }
            )
            axios.get(`http://192.168.33.238:8080/wy/getDB`).then(
                res=>{  
                    console.log("接受成功鸟~");   
                    this.list=res.data.topicList 
                    console.log(this.list);
                },
                er=>{
                    console.log("不准看",er.message);  
                }
            ) 
        }
    }
</script>

<style  lang="less" scoped> 
    .wy_body{
        background-color: #ccc;
        padding-bottom: 100px;  
        font-family: "黑体","宋体",sans-serif;
    }
    .wy_ul{
        width: 100%;
        li{
            width: 100%; 
            background-color: white;
            text-align: center;
            margin-bottom: 20px;
            padding-bottom: 10px;  
            img{
                width: 100%;
            } 
            .wy_li_div:nth-child(2){
                font-size: 18px; 
                margin: 10px 0;
                height: 18px;
            }
            .wy_li_div:nth-child(3){
                font-size: 16px; 
                margin-top: 20px;
                margin-bottom: 20px;
                height: 16px;
            }
            .wy_li_div:nth-child(4){
                font-size: 14px;
                color: #9b0000; 
                height: 14px;
            }
            .wy_li_div{
                box-sizing: border-box;
                line-height: 20px;
            }
        }
    }
    .wy_ul_buttom{
        li{ 
            width: 50%;
            height: 40px;
            text-align: center;
            line-height: 40px;  
            float: left;  
            box-sizing: border-box;
            background-color: white;
        }
    }
    .li_show{
        opacity: 0.3;
    }
</style>